<template>
  <div style="height: 100%; width: 100%">
    <div :id="echartId" :title="title" style="height: 100%; width: 100%"></div>
  </div>
</template>
<script>
export default {
  props: {
    echartId: {
      type: String,
      default: () => ''
    },
    radius: {
      type: [Array, String],
      default: () => {
        return ['35%', '55%']
      }
    },

    title: {
      type: String,
      default: () => {
        return ''
      }
    },

    startAngle: {
      type: String,
      default: '15'
    }
  },
  data () {
    return {
      // mychart: null,
    }
  },
  methods: {
    setOption (data, unit) {
      console.log(data)
      const mychart = this.$echarts.init(
        document.getElementById(this.echartId)
      )
      const option = {
        tooltip: {},
        legend: {
          textStyle: {
            color: 'white'
          },
          itemGap: 20,
          top: 200,
          left: 'center'
        },
        title: {
          text: data.title,
          left: 'center',
          top: '45%',
          textStyle: {
            color: '#000000',
            fontWeight: '500',
            fontSize: 16
          }
        },
        series: [
          {
            startAngle: this.startAngle,
            type: 'pie',
            radius: this.radius,
            left: 'center',
            width: '100%',
            itemStyle: {
              // borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              alignTo: 'edge',
              // formatter: '{name|{b}}\n{time|{c}人}',
              formatter: `{name|{b}}\n{number|{c}${unit}}`,
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                name: {
                  fontSize: 12,
                  color: 'white'
                },
                number: {
                  fontSize: 12,
                  color: 'white'
                }
              }
            },
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < mychart.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: data.data
          }
        ]
      }
      let count = 0
      setInterval(() => {
        mychart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: count
        })
        count++
        if (count === 4) {
          count = 0
        }
        mychart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: count
        })
      }, 1000)

      mychart.setOption(option)
      window.onresize = function () {
        mychart.resize()
      }
    }
  },
  mounted () {}
}
</script>
